.themeview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-column-gap: 3%;
  grid-row-gap: 3%;

  &_item {
    &_tumbl {
      flex-direction: column;
      height: 159px;
      border: 1px solid var(--borders);
      border-radius: 6px 6px 0 0;

      &_top {
        height: 8px;
        background-color: var(--bg-header);
        border-radius: 6px 6px 0 0;
      }

      &_toolpanel {
        display: grid;
        grid-template-columns: 60px 1fr 60px;
        height: 24px;
        align-items: center;
        background-color: var(--bg-toolbar);

        &>div {
          display: flex;
          align-items: flex-end;
        }

        &>div:nth-child(1) {
          padding-left: 6px;
        }

        &>div:nth-child(2) {
          justify-content: center;
        }

      }

      &_body {
        display: grid;
        grid-template-columns: 60px 1fr 60px;
        height: 127px;

        &_left {
          padding-left: 8px;
          padding-top: 10px;
          background-color: var(--bg-panel);
          border-right: 1px solid var(--borders);

          &_text1 {
            width: 40px;
            height: 4px;
            background-color: var(--text);
          }

          &_text2 {
            margin-top: 6px;
            width: 28px;
            height: 4px;
            background-color: var(--text);
          }
        }

        &_center {
          background-color: var(--borders);
        }

        &_right {
          border-left: 1px solid var(--borders);
          background-color: var(--bg-panel);
        }
      }

      &_panel {
        display: flex;
        justify-content: space-between;
        padding: 14px;
        border-radius: 0 0 6px 6px;
        border-left: 1px solid var(--borders);
        border-right: 1px solid var(--borders);
        border-bottom: 1px solid var(--borders);

        &_name {
          max-width: 10vw;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 16px;
          color: var(--text-active);
        }

        &_author {
          font-size: 12px;
          max-width: 10vw;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: var(--text-disabled);
        }

        &>div {
          display: flex;
        }

        &>div:nth-child(1) {
          flex-direction: column;
        }

        &>div:nth-child(2) {
          align-self: center;
        }

      }
    }
  }
}

.template_button {
  height: 14px;
  width: 30px;
  border-radius: 2px;
  background: var(--bg-toolbar-active);
  margin: 1px;
}
